<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>02-案例-tab选项</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>
        li {
            padding: 10px 20px;
            margin-right: 10px;
            margin-bottom: 10px !important;
            background-color: #ccc;
            font-size: 20px;
            cursor: pointer;
        }

        li.active {
            background-color: #f40;
            color: #fff;
            font-weight: 700;
        }

        .tab-pane {
            line-height: 43px;
            margin-top: 20px;
            background-color: #ccc;
            text-indent: 10px;
            width: 400px;
        }

        .tab-pane.active {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="demo">
        <div class="container">
            <h3 >案例-tab选项</h3>
            <hr>
            <div class="bs-example bs-example-tabs" >
                <ul id="myTabs" class="nav nav-tabs">
                  <li :class="{ active: str === 'a' }" @click="str='a'">a</li>
                  <li :class="{ active: str === 'b' }" @click="str='b'">b</li>
                  <li :class="{ active: str === 'c' }" @click="str='c'">c</li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane" :class="{ active: str === 'a' }" v-show="str === 'a'">
                    a的内容
                  </div>
                  <div class="tab-pane" :class="{ active: str === 'b' }" v-show="str === 'b'">
                    b的内容
                  </div>
                  <div class="tab-pane" :class="{ active: str === 'c' }" v-show="str === 'c'">
                    c的内容
                  </div>
                </div>
              </div>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        new Vue({
            el: '#demo',
            data: {
                str: 'a'
            }
        })
    </script>
</body>
</html>